<script setup>
import { ref, defineProps } from 'vue'
import { getIndexConfigListApi } from '@/apis/index-config.js'
import { route } from 'uview-plus'
const prop = defineProps({
  title: {
    type: String,
    default: '商品列表'
  },
  type: {
    type: Number,
    default: 3
  }
})

const list = ref([])
const getIndexConfigList = async () => {
  const res = await getIndexConfigListApi(prop.type)
  list.value = res.data.data
  console.log(list.value);

}
getIndexConfigList()

const onClickItem = (item) => {
  route({
    url: '/pages/goods/index?id=' + item.goodsId
  })
}
</script>
<template>
  <view>
    <view class="title-box">
      <text class="title">{{ title }}</text>
    </view>
    <!-- 宫格 -->
    <up-grid :col="2" border class="grid-box" gap="10rpx">
      <up-grid-item class="item" v-for="(item) in list" :key="item.goodsId" @click="onClickItem(item)">
        <up-image :src="item.goodsCoverImg" width="8.2rem" height="8.2rem" mode="aspectFit"></up-image>
        <up-text class="text" :lines="2" :text="item.goodsIntro"></up-text>
        <up-text class="price" color="#52ABAD" :text="'￥' + item.sellingPrice"></up-text>
      </up-grid-item>
    </up-grid>

  </view>
</template>
<style lang="scss" scoped>
.title-box {
  display: flex;
  justify-content: center;
  background-color: #F9F9F9;
  height: 3rem;
  line-height: 3rem;
  font-size: 18px;
  color: #52ABAD;

}

.grid-box {
  .item {
    padding: 1rem;
    height: 15rem;
    background-color: chartreuse;
    text-align: center;

    .price {
      display: flex;
      flex-direction: column;
    }
  }
}
</style>